<template>
    <div id="main" @mousemove="MainMove">
        <div class="sidebar" :style="{'width':sidewidth+'px'}" :sidewidth="sidewidth" />
        <div
        class="center"
        :style="{'left':fastartLeft+'px','top':fastartTop+'px'}">
            <h1>测试vue组态--实现移动和拖拽</h1>
            <p>鼠标坐标：</p>
            <p>{{left}}</p>
            <p>{{top}}</p>
            <p>移动元素的坐标</p>
            <p>{{sonx}}</p>
            <p>{{sony}}</p>

            <!-- <div 
            id="son"
            @mousedown="move" 
            :style="{'left':positionx+'px','top':positiony+'px'}">
                <p>元素可移动</p>
            </div> -->
            <move-test @func="sonmove"/>

            <change-test />
        </div>
    </div>
    
</template>

<script>
import MoveTest from './MoveTest.vue'
import ChangeTest from './ChangeTest.vue'


export default {
  name: 'test',//在画布内移动矩形   https://blog.csdn.net/weixin_39090097/article/details/82385986?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.compare&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.compare
  data () {
      return {
          left:0,//鼠标坐标
          top:0,
          fastartTop: 0,//父盒子初始位置
          fastartLeft: 0,
          sonx:0,
          sony:0,
          sidewidth:200
      }
  },
  components:{
      MoveTest,
      ChangeTest
  },
  methods: {
      MainMove(e) {
        //   console.log(e);
        //   console.log(e.clientX-e.offsetX);
        this.left = e.clientX;
        this.top = e.clientY;
      },
      sonmove(val) {
        // console.log(val);
        this.sonx = val.val1;
        this.sony = val.val2;
      }
  }
}
</script>

<style scoped>
#main {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background: rgb(201, 219, 166);
    display: flex;
    justify-content: space-between;
    position: relative;
}
.sidebar {
    height: 800px;
    background: rgb(228, 120, 120);
}
.center {
    background: yellowgreen;
    width: 100%;
    height: 800px;
    color: white;
    /* position: relative; */
}
</style>